<script lang="ts" setup>
import Mask from './Mask.vue'
const props = defineProps<{
  show: boolean
}>()
const addr0 = ref('')
const addr1 = ref('')
const emit = defineEmits(['confirm', 'close'])

const clear = () => {
  addr0.value = ''
  addr1.value = ''
}

const onConfirm = () => {
  emit('confirm', { token: addr0.value, base: addr1.value })
  clear()
}

const onCancel = () => {
  emit('close')
  clear()
}
</script>

<template>
  <Mask :show="props.show" @close="emit('close')">
    <div class="popup-add-pair">
      <div class="title-bar">添加币对</div>
      <div class="main-body">
        <div class="mb-1">代币地址</div>
        <input type="text" class="input-addr mb-2" v-model="addr0" />
        <div class="mb-1">对价币地址</div>
        <input type="text" class="input-addr mb-2" v-model="addr1" />

        <div class="btn-group">
          <div class="btn-act" @click="onConfirm">确认</div>
          <div class="btn-act" @click="onCancel">取消</div>
        </div>
        <div class="hint">
          <div>备注</div>
          <div>Hex: <span>0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39</span></div>
          <div>主网WETH: <span>0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2</span></div>
        </div>
      </div>
    </div>
  </Mask>
</template>

<style scoped>
.popup-add-pair {
  margin: 0 auto;
  margin-top: 2rem;

  width: 640px;
  height: 360px;
  background-color: #1d2d50;
  border-radius: 3px;
  overflow: hidden;
}

.title-bar {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
}

.main-body {
  padding: 1rem;
  background-color: #133b5c;
  height: calc(100% - 2rem);
}

.input-addr {
  width: 100%;
  height: 2rem;
  border-radius: 3px;
  outline: none;
  color: #1d2d50;
  padding: 0 0.25rem;
}

.btn-group {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.btn-act {
  padding: 0.25rem 1rem;
  cursor: pointer;
  user-select: none;
  background-color: #1e5f74;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 1rem;
}

.hint {
  border-top: 1px solid #fcdab7;
  margin-top: 1rem;
  padding-top: 1rem;
}
</style>